<template>
	<view class="container">
		<u-navbar title="登录" :autoBack="true" :placeholder="true" bgColor="none"></u-navbar>
		<view class="intro">
			<image src="/static/images/logo.png" mode="aspectFit"></image>
			<!-- <view class="tips">
				一杯啤酒，不仅是一口清爽
				<br>
				更是一份生活的诗意
			</view> -->
		</view>
		<view class="bottom">
			<button type="primary" class="login-btn" @click="getUserInfo">
				<image src="/static/images/mine/wechat.png"></image>
				微信一键登录
			</button>
			<view class="protocol" :class="animation">
				<view class="iconfont" :class="isAgree?'icon-yuanxingxuanzhongfill text-color-danger':'icon-yuanxingweixuanzhong'" @click="isAgree = !isAgree" />
				<text @click="isAgree = !isAgree">我已认真阅读并且同意</text>
				<text class="text-color-danger">《用户协议》</text>
				<text>与</text>
				<text class="text-color-danger">《隐私条款》</text>
			</view>
			<view class="flex flex-column justify-content-evenly align-center text-align-center" style="height: 30vh;">
				<view class="w-100 font-size-base text-color-white">新用户登录即加入会员，享会员权益</view>
				<view class="w-100 row flex just-content-around align-center font-size-sm text-color-white">
					<view class="grid">
						<view class="iconfont icon-wodeliquan"></view>
						<view>入会有礼</view>
					</view>
					<view class="grid">
						<view class="iconfont icon-jifen"></view>
						<view>积分兑换</view>
					</view>
					<view class="grid">
						<view class="iconfont icon-FOTAshengji-shengji"></view>
						<view>升级特权</view>
					</view>
					<view class="grid">
						<view class="iconfont icon-pijiu"></view>
						<view>生日特权</view>
					</view>
					<view class="grid">
						<view class="iconfont icon-jibie"></view>
						<view>神奇宝藏</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import Member from '@/api/member'
	import {mapMutations} from 'vuex'
	
	export default {
		data() {
			return {
				isAgree: false,
				animation:"",
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			async getUserInfo(e) {
				if(!this.isAgree){
					this.animation = "shake-animation"
					setTimeout( () => {
							this.animation = ""
					},2000);
				}else {
					uni.login({
						"provider": "weixin",
						"onlyAuthorize": true, 
						success: (ev) => {
							console.log(ev);
						},
						fail: (err) => {
							console.log(err)
							// 登录授权失败  
							// err.code是错误码
						}
					})
					// if(errMsg !== "getUserInfo:ok") {
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '您取消了授权登录，请重新授权',
					// 		showCancel: false
					// 	})
						
					// 	//没有授权登录就用默认的用户信息
					// 	this.SET_MEMBER(Member)
					// 	uni.navigateBack()
						
					// 	return
					// } else {
					// 	const {avatarUrl: avatar, city, country, gender, nickName: nickname, province} = userInfo
					// 	const member = Object.assign(Member, {avatar, city, country, gender, nickname, province})
					// 	this.SET_MEMBER(member)
						
					// 	uni.navigateBack()
					// }
				}
				
			},
			login() {
				this.SET_MEMBER(Member)
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page{
		background: linear-gradient(34deg, #F3C45D, #EDAC2F);
	}
</style>
<style lang="scss" scoped>
	.intro {
		width: 100%;
		// height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: $font-size-base;
		color: $text-color-white;
		
		image {
			width: 80%;
		}
		
		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}
	
	.bottom {
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;
		
		.login-btn {
			width: 100%;
			// border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			background: #F9E1B2;
			
			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		.protocol{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			.iconfont{
				margin-right: 10rpx;
			}
		}
		.row {
			.grid {
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.iconfont {
					display: block;
					padding: 10rpx;
					border-radius: 50%;
					font-size: 60rpx;
					color: $color-primary;
					margin-bottom: 10rpx;
					background-color: #FFF3D9;
				}
			}
		}
	}
	@keyframes shake {
	  0% { transform: translateX(0); }
	  25% { transform: translateX(-4px); }
	  50% { transform: translateX(4px); }
	  75% { transform: translateX(-4px); }
	  100% { transform: translateX(4px); }
	}
	.shake-animation {
	  display: inline-block;
	  animation: shake 0.5s; /* 抖动的持续时间 */
	  animation-iteration-count: infinite; /* 动画重复次数 */
	}
</style>
